const center = [104.1324, 36.92669]
var map = null
var mapDom = document.getElementById('map')
const baseUrl = "http://localhost:63342/code/mapboxgl-lecture/data/"
const style = {
    glyphs: baseUrl + "fonts/mapbox/{fontstack}/{range}.pbf",
    name: "my-style",
    sources: {
        'capital': {
            "type": "geojson",
            "data": "../data/capital.geojson"
        }
    },
    layers: [
        {
            "id": "capital-circle1",
            "type": "symbol",
            "source": "capital",
            layout: {
                'icon-image': 'poi',
                'icon-size': 0.6,
                'text-field': ['get', 'name'],
                'text-anchor': 'bottom',
                'text-offset': [0, 2.2],
                'text-size': 12,
                'text-font': ['Guardian Text Sans Web Bold', 'Osaka']
            },
            paint: {
                'text-color': 'red'
            }
        }
    ],
    sprite: baseUrl,
    version: 8,
}
map = new mapboxgl.Map({
    container: mapDom, // container ID
    style: style, // style URL
    center: center, // starting position [lng, lat]
    zoom: 3,
    doubleClickZoom: false,
    hash: false,
    localFontFamily: true,
    logoPosition: 'bottom-right'
});